<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/lodash.js"></script>
</head>
<body>
    <div>
        <h1>我是计数器<span>0</span></h1>
        <button>点我加上1</button>
    </div>
</body>
</html>
<script>
    // 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔次啊会触发回调，把频繁触发变为少量触发
    // 获取节点
    let span = document.querySelector('span')
    let button = document.querySelector('button')
    let count = 0
    // 计数器：在一秒以内，数字只能加1
    button.onclick = _.throttle(function(){
        // 节流：目前这个回调函数是5s执行一次
        // 假如这里面有很多的业务代码，是不是可以给浏览器很充裕的时间去解析
        count++
        span.innerHTML = count
    }, 5000)

    // 防抖：用户操作很频繁，但只是执行一次
    // 节流：用户操作很频繁，但是它把频繁的操作变为少量操作【可以给浏览器有充裕的时间解析代码】
    // 节流：闭包+延迟器
</script>